What?

Site Logo and Featured Image blocks feature a new style of placeholder, a more literal one that is meant to inherit colors, radius, dimensions and more from its surroundings. These:

This PR does a few things:

• It extracts all reusable pieces from Featured Image and Site Logo, and stores them in the main placeholder component CSS file.
• It fixes an issue where the Site Logo did not properly inherit radius (see the square site logo in the screenshot above)
• It refactors some of the code to be simpler, for example the code to show/hide controls inside the placeholder.
• Finally it removed the semitransparency that was applied to the dashed line, making the line fully opaque.

Here's the end result, 3 GIFs showing the same dashed outlines as before, on 3 different background colors:

Why?

The opacity change is made for two reasons. In part, it enhances contrast a bit. Secondly, it solves an issue where adding border-support to this placeholder revealed an inherited radius issue, discussed in depth here. For such a border inheritance to work, the border has to be fully opaque (to put it shortly, we can't do rgba(currentColor, 0.4)).

The refactor was done because we are increasingly seeing a need for placeholders to inherit qualities from their surroundings. By reducing duplicated code, we can more simply expand this style of placeholders, for example to the Image block which could be next. See #41142, #43180 and WordPress/twentytwentythree#30.

Testing Instructions

Test site logo, featured image blocks, ideally in a variety of color schemes and in context of other blocks, and outside of a more opaque border, things should look the same.